<template>
  <GridPage title="编辑企业信息">
    <n-card class="mt-12">
      <n-form ref="formRef" :model="form" :rules="rules" :disabled="form.state === undefined">
        <n-grid :cols="24" :x-gap="24">
          <n-form-item-gi label="公司名称" path="company_name" :span="12">
            <n-input v-model:value="form.company_name" :allow-input="noSideSpace" />
          </n-form-item-gi>
          <n-form-item-gi label="公司图标URL" path="company_icon" :span="12">
            <n-input v-model:value="form.company_icon" :allow-input="noSideSpace" />
          </n-form-item-gi>
          <n-form-item-gi label="公司规模" path="size" :span="12">
            <n-select v-model:value="form.size" :options="sizeOps" />
          </n-form-item-gi>
          <n-form-item-gi label="公司行业" path="industry_code" :span="12">
            <n-input v-model:value="industry_name" @click="handleOpenIndustrySelect" />
          </n-form-item-gi>
          <n-form-item-gi label="公司所在地" path="address_code" :span="12">
            <n-cascader
              v-model:value="form.address_code"
              expand-trigger="hover"
              :options="cities"
              :show-path="true"
              check-strategy="child"
            />
          </n-form-item-gi>
          <n-form-item-gi label="公司特点标签" path="company_tags" :span="24">
            <n-card embedded>
              <n-dynamic-tags v-model:value="form.company_tags" :max="8" />
            </n-card>
          </n-form-item-gi>
          <n-form-item-gi label="公司福利标签" path="benefit_tags" :span="24">
            <n-card embedded>
              <n-dynamic-tags v-model:value="form.benefit_tags" :max="8" />
            </n-card>
          </n-form-item-gi>
          <!-- <n-form-item-gi label="公司相册" :span="24">
            <n-upload
              action=""
              :default-file-list="previewFileList"
              list-type="image-card"
            ></n-upload>
          </n-form-item-gi> -->
          <n-form-item-gi label="公司描述" path="description" :span="24">
            <n-input
              v-model:value="form.description"
              type="textarea"
              :allow-input="noSideSpace"
              maxlength="1000"
              :autosize="{
                minRows: 4,
                maxRows: 6,
              }"
            />
          </n-form-item-gi>
          <n-gi :span="24">
            <n-flex justify="end">
              <n-button type="info" @click="saveComapnyInfo">修改企业信息</n-button>
            </n-flex>
          </n-gi>
        </n-grid>
      </n-form>
    </n-card>
  </GridPage>
  <IndustrySelect ref="industrySelectRef" @click-industry="handleClickIndustry"></IndustrySelect>
</template>

<script setup>
import { GridPage, IndustrySelect } from '@/components'
import companyApi from '@/api/company'
import { useRecruiterStore } from '@/store/modules/recruiter'
import { useForm } from '@/composables'
import { cities, getIndustriesName } from '@/data'
const recruiterStore = useRecruiterStore()
// recruiterStore.getRecruiter()

const router = useRouter()

const rules = {
  company_name: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  company_icon: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
  size: { type: 'number', required: true, message: '此为必填项', trigger: ['blur'] },
  industry_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  address_code: { required: true, message: '此为必填项', trigger: ['blur'] },
  company_tags: {
    type: 'array',
    required: true,
    message: '至少输入一个标签',
    trigger: ['blur', 'change'],
  },
  benefit_tags: {
    type: 'array',
    required: true,
    message: '至少输入一个标签',
    trigger: ['blur', 'change'],
  },
  description: { required: true, message: '此为必填项', trigger: ['blur', 'change'] },
}

function noSideSpace(value) {
  return !value.startsWith(' ') && !value.endsWith(' ')
}

let industry_name = computed(() => {
  return getIndustriesName(form.value.industry_code)
})

const sizeOps = [
  { value: 0, label: '20人以下' },
  { value: 1, label: '20-50人' },
  { value: 2, label: '50-100人' },
  { value: 3, label: '100-200人' },
  { value: 4, label: '200-500人' },
  { value: 5, label: '500-1000人' },
  { value: 6, label: '1000-2000人' },
  { value: 7, label: '2000-5000人' },
  { value: 8, label: '5000人以上' },
]

const [formRef, form, validation] = useForm({})

//保存公司信息
async function saveComapnyInfo() {
  await validation()
  await companyApi.updateCompanyInfo(form.value)
  $message.success('更新成功！')
}
//打开行业选择框
const industrySelectRef = ref()
function handleOpenIndustrySelect() {
  industrySelectRef.value.open()
}
//设置点击目标的行业信息
function handleClickIndustry(industry_obj) {
  form.value.industry_code = industry_obj.industry_code
}

onMounted(async () => {
  // await recruiterStore.getRecruiter()
  const company_id = recruiterStore.recruiter.company_id
  if (!company_id) {
    $dialog.create({
      title: '暂无企业信息',
      content: '您暂未加入任何企业，请添加企业后重试',
      positiveText: '加入企业',
      negativeText: '注册企业',
      closable: false,
      maskClosable: false,
      onPositiveClick() {
        router.push('/recruiter/companyJoin')
      },
      onNegativeClick() {
        router.push('/recruiter/companyAuthenticate')
      },
    })
  } else {
    const { data } = await companyApi.getCompanyInfo(recruiterStore.recruiter.company_id)
    form.value = data
  }
})
</script>
